import React, { useState } from 'react'

function TelShow({ tel }) {
  const [ flag, setFlag ] = useState(true)
  return (
    <>
      {
        flag ?
        <span onClick = { () => {
          setFlag(false)
        }} style={{ userSelect:'none',cursor: 'pointer', color: 'yellowgreen'}}> {
            tel.substring(0,3)+' **** '+tel.substring(7,11)
        } </span> :
        <span onClick = { () => {
          setFlag(true)
        }} style={{ userSelect:'none',cursor: 'pointer', color: 'skyblue'}}>{ tel }</span>
      }
    </>
  )
}

export default TelShow
